<template>
  <div class="file-list">
    <h3>VTK文件列表</h3>
    <ul>
      <li v-for="file in files" :key="file" @click="selectFile(file)">
        {{ file }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const emit = defineEmits(['file-selected'])
const files = ref([])

// 从Flask后端获取文件列表
const fetchFiles = async () => {
  try {
    const response = await axios.get('http://localhost:5000/api/vtk-files')
    files.value = response.data
  } catch (error) {
    console.error('获取文件列表失败:', error)
  }
}

// 文件选择处理
const selectFile = (filename) => {
  emit('file-selected', filename); // 触发父组件的 handleFileSelected
};

onMounted(fetchFiles)
</script>

<style scoped>
.file-list {
  width: 300px;
  border-right: 1px solid #eee;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
li:hover {
  background-color: #f5f7fa;
}
</style>